@charset "utf-8";

$global-font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$global-background-color: #EAEAEA;
$global-color: #58666e;
$global-border-color: #CCCCCC;
$global-font-size: 14px;


/************* 页面 ***************/

* {
	margin: 0;
	padding: 0;
}

html,body {
	color: $global-color;
	background-color: $global-background-color;
	font-family: $global-font-family;
}

a {
	text-decoration: none;
}

/*****************  表单组件 **************/
.form-group {
	width: 100%;
	margin: 20px 0px 20px 0px;
}

.form-row {
	width: 100%;
	height: 45px;
	line-height: 45px;
}

.form-row input[type='text'],
.form-row input[type='password'] {
    //自定义宽度、高度和行高
    border-color: $global-border-color;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    padding: 0px 10px 0px 10px;
}

.form-text, .form-textare {
    border-color: $global-border-color;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    //自定义文本框高度
    padding: 5px;
}

.form-default-button {
    padding: 8px 15px 8px 15px;
    border: none;
    background-color: #1B9AF7;
    border-radius: 3px;
    color: #FFFFFF;
}

.form-default-button:hover {
    background-color: #20B2AA;
}

.form-button-add {
    padding: 8px 15px 8px 15px;
    border: none;
    background-color: #1B9AF7;
    border-radius: 3px;
    color: #FFFFFF;
}

.form-button-add:hover {
    background-color: #5CACEE;
}

.form-button-search {
    padding: 8px 15px 8px 15px;
    border: none;
    background-color: #1B9AF7;
    border-radius: 3px;
    color: #FFFFFF;
}

.form-button-search:hover {
    background-color: #5CACEE;
}

/********************** 布局 ***********************/
.container-center {
	position: absolute;
	left: 50%;
	top: 50%;
	//自定义高度、宽度、左边距和上边距
}

.text-align-center {
	text-align: center;
}

/********************* 面板 **************************/
.common-panel {
    border-style: solid;
    border-width: 1px;
    border-color: #CCCCCC;
}

.common-panel-tile {
    height: 25px;
    line-height: 25px;
    padding: 10px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #CCCCCC;
}

.common-panel-content {
    background-color: #FFFFFF;
    padding: 10px;
}

.none-border-panel {
    background-color: #C1C1C1;
    margin: 10px;
}

.none-border-panel-tile {
    height: 25px;
    line-height: 25px;
    padding: 10px;
}

.none-backgound-panel {
    background-color: #C1C1C1;
    margin: 10px;
}

/************************ 字体 *******************/
.font-14px {
    font-size: $global-font-size;
}

/*********************** 实例部分 *****************/
.box-center-300px {
	width: 300px;
	height: 300px;
	margin-left: -150px;
	margin-top: -200px;
}

.box-magrin-top-100px {
	margin-top: 100px;
}

.login-input {
	width: 92%;
	height: 45px;
	line-height: 45px;
}

.button-full {
	width: 100%;
	height: 50px;
	font-size: 18px;
}

.bartop-header {
	width: 100%;
	height: 50px;
	background-color: #4A4A4A;
}

.page-admin-content {
	position: absolute;
	top: 50px;
	bottom: 0;
	width: 100%;
	background-color: green;
}

.sidebar-nav {
	position: absolute;
	width: 200px;
	height: 100%;
	left: 0px;
	background-color: #424242;
}

.main-area {
	margin-left: 200px;
	height: 100%;
	overflow: yes;
	background-color: #F5F5F5;
}

.init-content-box {
	width: 100%;
}

.init-content-box-main {
	width: 100%;
}

.navbar-header, .navbar-header-logo {
	position: absolute !important;
	width: 200px;
	color: #A2B5CD;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
	height: 50px;
	background-color: #4A4A4A;
}

.navbar-header-content {
	height: 50px;
	color: #FFFFFF;
	background-color: red;
}

.navbar-header-nav-left {
	position: absolute !important;
	left: 200px;
	top: 0;
	/* float: left; */
}

.navbar-header-nav-right {
	position: absolute !important;
	right: 20px;
	top: 0;
	/* float: right; */
}

.nav-menu {
	list-style-type: none;
	margin: 0;
	padding: 0 0;
}

.nav-menu-tree {
	position: absolute;
	list-style-type: none;
	margin: 0;
	padding: 0 0;
	width: 100%;
}

.nav-side-tree {
	width: 100%;
}

.nav-header-tree {
	border-width: 1px;
	border-style: solid;
	border-color: #DBDBDB;
	border-radius: 3px;
}

.nav-menu-child {
	display: none;
}

.nav-header-child-item {
	background-color: #FFFFFF;
}

.nav-x-item {
	float: left;
	padding: 0 5px;
}

.nav-y-item {
	padding: 5px 0;
}

.nav-y-item:hover {
	background-color: #3B3B3B;
}

.nav-header-child-item > a {
	color: #2E2E2E;
	font-size: 14px;
	padding: 0 10px;
}

.nav-header-child-item:hover {
	background-color: #EAEAEA;
}

.nav-item > a, .nav-second-level-item > a {
	padding: 0 10px;
	color:  #FFFFFF;
}

.nav-header-item:hover ul {
	display: block;
}

.nav-first-level-item {
	width: 150px;
	display: inline-block;
}

.nav-first-level-item-open {
	background-color: #3D3D3D;
}

.nav-second-level-item {
	background-color: #3D3D3D;
}

.nav-second-level-item:hover {
	background-color: #4A4A4A;
}

.line-height-50px {
	height: 50px;
	line-height: 50px;
}

.line-height-30px {
	height: 30px;
	line-height: 30px;
}

.navbar-header-menu {
	float: left;
}

.navbar-header-menu > ul, .navbar-header-current-user > ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	line-height: 50px;
}

.navbar-header-menu > ul > li, .navbar-header-current-user > ul > li {
	float: left;
	margin: 0 5px 0 5px;
	padding: 0 5px 0 5px;
}

.navbar-header-menu > ul > li > a, .navbar-header-current-user > ul > li > a {
	color: #FFFFFF;
}


.navbar-header-menu ul li:hover ul, .navbar-header-current-user ul li:hover ul {
	display: block;
}

.navbar-header-menu > ul > li > ul, .navbar-header-current-user > ul > li > ul {
	list-style: none;
	position: absolute;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	z-index: 1023;
	border-width: 1px;
	border-color: #EDEDED;
	border-style: solid;
	background-color: #FFFFF0;
	display: none;
}

.navbar-header-menu > ul > li > ul > li, .navbar-header-current-user > ul > li > ul > li {
	padding: 0 10px 0 10px;
	line-height: 45px;
}

.navbar-header-menu > ul > li > ul > li:hover, .navbar-header-current-user > ul > li > ul > li:hover {
	background-color: #FFF8DC;
}

.navbar-header-menu > ul > li > ul > li > a, .navbar-header-current-user > ul > li > ul > li > a {
	color: #515151;
	font-size: 14px;
}

.navbar-header-current-user {
	float: right;
	margin: 0 5px 0 5px;
	padding: 0 5px 0 5px;
}

.sidebar-nav > ul, .sidebar-nav > ul > li > ul {
	margin: 0;
	padding: 0;
	position: relative;
}

.sidebar-nav > ul > li {
	height: 40px;
	line-height: 40px;
	position: relative;
	text-overflow: ellipsis;
}

.sidebar-nav > ul > li:hover {
	background-color: #383838;
}

.sidebar-nav > ul > li > a, .sidebar-nav > ul > li > ul > li > a {
	padding: 0 10px;
	color: #FFFFFF;
	font-size: 14px;
}

.margin-right-10px {
	margin-right: 10px;
}

.init-content-box {
	display: flex;
	margin-top: 10px;
}

.init-content-box-main {
	flex: 1;
	padding: 10px;
}

.init-content-box-right {
	margin-left: 5px;
	min-width: 400px;
	max-width: 400px;
}

.dl-display-block {
	margin: 0px;
}

.dl-display-block dt {
	display: inline-block;
	padding: 25px;
	background-color: #E8E8E8;
	text-align: center;
}

.span-display-block {
	display: block;
}

.dl-display-list {
	margin: 0px;
}

.dl-display-list > dt > a {
	color: #58666e;
}

/********************** admin template *******************/
.layout-body {
	min-width: 1024px;
	overflow: hidden;
}

.layout-admin, .page-header {
	background-color: #424242;
}

.page-header {
	z-index: 1000;
	height: 50px;
	position: relative;
}

.page-side {
	position: fixed;
	top: 50px;
	bottom: 0;
	width: 200px;
	z-index: 999;
	color: #fff !important;
	overflow-x: hidden;
	background-color: #424242 !important;
}

.page-body {
	position: absolute;
	top: 50px;
	left: 200px;
	right: 0;
	z-index: 998;
	width: auto;
	bottom: 44px;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
}

.page-footer {
	position: fixed;
	left: 200px;
	right: 0;
	bottom: 0;
	height: 44px;
	line-height: 44px;
	padding: 0 15px;
	background-color: #eee;
}
